<template>
    <div v-loading="loading" class="app-container dialog">
        <div class="title">其他事项</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            label-position="right"
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input
                    :readonly="taskName != '发起'"
                    style="width: 760px"
                    v-model="form.title"
                ></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="单位审核" prop="unit_audit">
                        <el-radio-group
                            @change="UnitAuditChange"
                            v-model="form.unit_audit"
                        >
                            <el-radio
                                :disabled="taskName != '发起'"
                                label="true"
                                >是</el-radio
                            >
                            <el-radio
                                :disabled="taskName != '发起'"
                                label="false"
                                >否</el-radio
                            >
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核单位"
                        prop="Auditunit"
                    >
                        <el-cascader
                            :disabled="taskName != '发起'"
                            :props="{ value: 'id', checkStrictly: true }"
                            :show-all-levels="false"
                            @change="deptChange"
                            v-model="officeId"
                            placeholder="请选择，可搜索"
                            :options="dept"
                            clearable
                            filterable
                        ></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核人员"
                        prop="Auditunit"
                    >
                        <el-select
                            :disabled="taskName != '发起'"
                            clearable
                            style="width: 200px"
                            v-model="form.audit_person"
                            :placeholder="
                                form.officeId
                                    ? '请选择审核人员'
                                    : '请先选择审核部门'
                            "
                        >
                            <el-option
                                v-for="item in users"
                                :key="item.userName"
                                :label="item.nickName"
                                :value="item.userName"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="Subhead">需求信息</div>
            <el-form-item label="需求内容">
                <editor
                                           :readonly ="taskName != '发起'"
                    v-model="form.demand_content"
                    style="
                        min-height: 192px;
                        max-height: 400px;
                        overflow-y: auto;
                    "
                    :min-height="192"
                    :max-height="400"
                />
            </el-form-item>
        </el-form>
        <div class="Subhead">
            附件<el-upload
                v-if="taskName == '发起'"
                style="display: inline-block"
                class="upload-demo"
                accept
                list-type="picture"
                :show-file-list="false"
                ref="upload"
                :file-list="fileList"
                action=""
                :on-remove="handleChange"
                :on-change="handleChange"
                :auto-upload="false"
            >
                <img
                    style="width: 20px; cursor: pointer; vertical-align: middle"
                    src="../../../assets/icons/add.png"
                    alt=""
                />
            </el-upload>
            <span class="mintitles"> 最大1M/个 </span>
        </div>
        <el-table :data="fileList">
            <el-table-column label="文件名称">
                <template slot-scope="scope">
                    {{
                        scope.row.fileName
                            ? scope.row.fileName
                            : scope.row.name.substring(
                                  0,
                                  scope.row.name.lastIndexOf(".")
                              )
                    }}
                </template>
            </el-table-column>
            <el-table-column label="文件类型">
                <template slot-scope="scope">
                    {{
                        scope.row.fileExt
                            ? scope.row.fileExt
                            : scope.row.name.substring(
                                  scope.row.name.lastIndexOf(".") + 1,
                                  scope.row.name.length
                              )
                    }}
                </template>
            </el-table-column>
            <el-table-column label="">
                <template slot-scope="scope">
                    <span
                        :style="
                            scope.row.fileExt ? 'color:green;' : 'color:red;'
                        "
                    >
                        {{ scope.row.fileExt ? "已上传" : "" }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="260"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        v-show="scope.row.fileExt == 'jpeg' ||
                                    scope.row.fileExt == 'jpg' ||
                                    scope.row.fileExt == 'png' ||
                                    scope.row.fileExt == 'pdf' ||
                                    scope.row.fileExt == 'gif'"
                        @click="previewFile(scope.row)"
                        >预览
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        v-if="taskName == '发起'"
                        @click="DeleteFile(scope.row.id)"
                        >删除
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-download"
                        v-if="scope.row.id"
                        @click="download(scope.row)"
                        >下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
       <action-button v-if="taskName" :taskName="taskName" :loading="btnLoading" @changeExamineShow="changeExamineShow"/>
        <el-dialog :visible.sync="dialogVisible">
            <div style="max-height: 90vh; overflow-y: scroll">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { listUser2 } from "@/api/system/user";
import { uploadFile } from "@/api/system/upload.js";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js";
import { Getformdata, taskComplete } from "@/api/todoItem/todo.js";
import { DelectUploadFile } from "@/api/cloud/cloud";
import actionButton from "@/components/actionButton/index.vue";
export default {
    name: "OtherMatterssdetails",
    components: {
        Editor,actionButton
    },
    data() {
        return {
            loading: false,
            taskName: "",
            title: "",
            taskId: "",
            definitionName: "",
            btnLoading: true,
            form: {
                unit_audit: "false",
                audit_unit: null,
                audit_person: null,
            },
            //部门列表树结构
            dept: [],
            //上云系统列表
            xtList: [],
            // 部门id
            officeId: "",
            // 关机时间下拉数组
            ShutDownList: [
                {
                    id: "1",
                    name: "上班时间",
                },
                {
                    id: "2",
                    name: "非上班时间",
                },
                {
                    id: "3",
                    name: "不能关闭",
                },
                {
                    id: "4",
                    name: "其他时间",
                },
            ],
            // 系统状态
            SystemStateList: [
                {
                    id: "1",
                    name: "从系统选择",
                },
                {
                    id: "2",
                    name: "其他",
                },
            ],
            // 操作系统下拉数据
            operatingSystemList: [
                {
                    id: "1",
                    name: "Linux",
                },
                {
                    id: "2",
                    name: "Windows",
                },
            ],
            // 网络环境下拉数据
            networkList: [
                {
                    id: "1",
                    name: "政务外网",
                },
                {
                    id: "2",
                    name: "互联网",
                },
            ],
            // 交互类型
            ExchangeType: [
                {
                    id: "资源池内交互",
                    name: "资源池内交互",
                },
                {
                    id: "跨网交互",
                    name: "跨网交互",
                },
                {
                    id: "其他交互",
                    name: "其他交互",
                },
            ],
            // 交互方式
            InteractionModeList: [
                {
                    id: "协议交互",
                    name: "协议交互",
                },
                {
                    id: "文件交互",
                    name: "文件交互",
                },
                {
                    id: "数据库交互",
                    name: "数据库交互",
                },
            ],
            // 协议下拉数据
            agreementList: [
                {
                    id: "http",
                    name: "http",
                },
                {
                    id: "https",
                    name: "https",
                },
                {
                    id: "ftp",
                    name: "ftp",
                },
                {
                    id: "snmp",
                    name: "snmp",
                },
                {
                    id: "其他",
                    name: "其他",
                },
            ],
            // 交互时间
            InteractionTimeList: [
                {
                    id: "每月",
                    name: "每月",
                },
                {
                    id: "每周",
                    name: "每周",
                },
                {
                    id: "每天",
                    name: "每天",
                },
                {
                    id: "实时",
                    name: "实时",
                },
                {
                    id: "不定期",
                    name: "不定期",
                },
                {
                    id: "其他",
                    name: "其他",
                },
            ],
            rules: {},
            applicationSystem: null,
            IpType: null,
            PortManage: null,
            port: null,
            portType: null,
            remarks: null,
            columns: [
                {
                    title: "互联网IP",
                    slot: "InternetIP",
                },
                {
                    title: "互联网端口",
                    slot: "InternetPort",
                },
                {
                    title: "政务外网IP",
                    slot: "extranetIP",
                },
                {
                    title: "政务外网端口",
                    slot: "extranetPort",
                },
                {
                    title: "协议",
                    slot: "agreement",
                },
                {
                    title: "交互时间",
                    slot: "InteractionTime",
                },
                {
                    title: "备注",
                    slot: "remarks",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            data: [],
            editIndex: -1, // 当前聚焦的输入框的行数
            editapplicationSystem: "",
            editIpType: "",
            editPortManage: "",
            editport: "",
            editportType: "",
            editremarks: "",
            IsUnitAudit: false,
            // 用户数据
            users: [],
            // 主办者证件
            fileList: [],
            base_url: process.env.VUE_APP_BASE_API,
            dialogImageUrl: "",
            dialogVisible: false,
        };
    },
    created() {
        this.Getdata();
    },
    computed: {
        visitedViews() {
            return this.$store.state.tagsView.visitedViews;
        },
        routerUrl() {
            return this.$route.path;
        },
    },
    watch: {
        visitedViews(value) {
            if (value) {
                if (this.$options.name == "OtherMatterssdetails") {
                    return;
                }
                this.$destroy(this.$options.name);
            }
        },
        routerUrl(value) {
            if (value == "/businessassistance/OtherMatterss/details") {
                this.Getdata();
            }
        },
    },
    methods: {
        Getdata() {
            this.loading = true
            this.GetListSelect();
            var list = JSON.parse(sessionStorage.getItem("OtherMatterss"));
            this.title = list.instanceName;
            this.taskId = list.taskId;
            this.definitionName = list.definitionName;
            this.taskName = list.taskName;
            this.btnLoading = false;
            Getformdata(list.instanceId).then((res) => {
                this.form = res.data;
                this.fileList = res.data.files;
                if (this.form.unit_audit == "true") {
                    this.IsUnitAudit = true;
                    this.officeId = Number(this.form.audit_unit);
                    this.deptChange([this.form.audit_unit]);
                }
                this.data = res.data.protocol_interaction;
                this.loading = false
            }).catch(err=>{
                this.loading = false
            })
        },
        getName(data, id) {
            data.forEach((item) => {
                if (item.id == id) {
                    this.form.officeName = item.label;
                } else if (item.children && item.children.length) {
                    this.getName(item.children, id);
                }
            });
        },
        deptChange(e) {
            this.users = [];
            if (e.length) {
                this.form.audit_unit = e[e.length - 1];
                this.getName(this.dept, this.form.audit_unit);
                listUser2({
                    deptId: this.form.audit_unit,
                    pageNum: 1,
                    pageSize: 10000000,
                }).then((response) => {
                    this.users = response.rows;
                });
            }
        },
        UnitAuditChange(e) {
            if (e == "true") {
                this.IsUnitAudit = true;
            } else {
                this.IsUnitAudit = false;
                this.form.audit_unit = null;
                this.form.audit_person = null;
                this.officeId = null;
            }
        },
        GetListSelect() {
            treeselect({}).then((response) => {
                this.dept = response.data;
            });
            AllcloudUpList().then((response) => {
                this.xtList = response.rows;
            });
        },
        handleChange(row, fileList) {
            this.fileList = fileList;
        },
        previewFile(item) {
            if (item.filePath) {
                this.dialogImageUrl = this.base_url + item.filePath;
                this.dialogVisible = true;
                return;
            } else {
                if (
                    item.name.substring(
                        item.name.lastIndexOf(".") + 1,
                        item.name.length
                    ) == "gif" ||
                    item.name.substring(
                        item.name.lastIndexOf(".") + 1,
                        item.name.length
                    ) == "jpeg" ||
                    item.name.substring(
                        item.name.lastIndexOf(".") + 1,
                        item.name.length
                    ) == "jpg" ||
                    item.name.substring(
                        item.name.lastIndexOf(".") + 1,
                        item.name.length
                    ) == "gif" ||
                    item.name.substring(
                        item.name.lastIndexOf(".") + 1,
                        item.name.length
                    ) == "png"
                ) {
                    this.dialogImageUrl = item.url;
                    this.dialogVisible = true;
                    return;
                } else {
                    this.$message.error(
                        `仅限后缀名为 gif、jpeg、jpg、png 可预览`
                    );
                }
            }
        },
        download(item) {
            let downloadFile =
                this.base_url +
                "/system/downloadFile?fileName=" +
                item.fileName +
                "&filePath=" +
                item.filePath;
            window.location.href = downloadFile;
            return;
        },
        DeleteFile(id) {
            this.$confirm("本次操作会永久删除文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                DelectUploadFile(id).then((res) => {
                    if (res.code == 200) {
                        this.form.files = this.form.files.filter((item) => {
                            if (item.id == id) {
                            } else {
                                return item;
                            }
                        });
                        this.fileList = this.fileList.filter((item) => {
                            if (item.id == id) {
                            } else {
                                return item;
                            }
                        });
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                    }
                });
            });
        },
        sumit() {
            if (this.fileList.length > 0) {
                let Files1 = new FormData();
                Files1.append("key", "file");
                this.fileList.forEach((item) => {
                    if (item.raw) {
                        Files1.append("file", item.raw);
                    }
                });
                uploadFile(Files1).then((ress) => {
                    let obj = {
                        formData: this.form,
                        formDefKey: "otherMatters",
                        title: this.form.title,
                        files: ress.data,
                    };
                    definition(obj).then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.form = {};
                            this.fileList = [];
                            Files1 = null;
                            this.form.audit_unit = null;
                            this.form.audit_person = null;
                        }
                    });
                });
            }
        },
        changeExamineShow(num, leble) {
           this.$prompt('请输入审批意见', num == 1 ? '通过': '不通过', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
           inputValue:num == 1 ? '通过': '不通过',
           }).then((resp) => {
                    var Flies = [];
                    if(this.fileList){
                        this.fileList.forEach((item) => {
                            if (item.id) {
                            } else {
                                Flies.push(item);
                            }
                        });
                    }
                    if (this.taskName == "发起" && Flies.length > 0) {
                        this.loading = true
                        let param = new FormData();
                        param.append("key", "file");
                        Flies.forEach((item) => {
                            param.append("file", item.raw);
                        });
                        uploadFile(param)
                            .then((ress) => {
                                if (this.form.files) {
                                } else {
                                    this.form.files = [];
                                }
                                this.form.files.push(...ress.data);
                                this.fileList = [];
                                Flies = [];
                                taskComplete({
                                    taskId: this.taskId,
                                    actionName: num == 1 ? "通过" : "不通过",
                                    action: num == 1 ? "COMPLETE" : "BACK",
                                    formData: this.form,
                                    formDefKey: this.form.formDefKey,
                                    files: this.form.files,
                                    comment:resp.value
                                }).then((res) => {
                                    if (res.code == 200) {
                                        this.$message({
                                            type: "success",
                                            message: res.msg,
                                        });
                                        this.$store.state.tagsView.visitedViews.splice(
                                            this.$store.state.tagsView.visitedViews.findIndex(
                                                (item) =>
                                                    item.path ===
                                                    this.$route.path
                                            ),
                                            1
                                        );
                                        this.$destroy(this.$options.name);
                                        this.$router.push("/todoItem/todo");
                                        this.loading = false
                                    }
                                }).catch(err=>{
                                    this.loading = false
                                })
                            })
                            .catch((err) => {
                                this.$message({
                                    message: err.msg,
                                    type: "error",
                                });
                                this.fileList = this.form.files;
                                this.loading = false
                            });
                    } else {
                        this.loading = true
                        taskComplete({
                            taskId: this.taskId,
                            actionName: num == 1 ? "通过" : "不通过",
                            action: num == 1 ? "COMPLETE" : "BACK",
                            formData: this.form,
                            formDefKey: this.form.formDefKey,
                            files: this.fileList,
                            comment:resp.value
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: res.msg,
                                });
                                this.$store.state.tagsView.visitedViews.splice(
                                    this.$store.state.tagsView.visitedViews.findIndex(
                                        (item) => item.path === this.$route.path
                                    ),
                                    1
                                );
                                this.$destroy(this.$options.name);
                                this.$router.push("/todoItem/todo");
                                this.loading = false
                            }
                        }).catch(err=>{
                            this.loading = false
                        })
                    }
                })
                .catch(() => {
                    this.loading = false
                    this.$message({
                        type: "info",
                        message: "已取消操作",
                    });
                });
        },
    },
};
</script>

<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
        .mintitles {
            font-size: 8px;
            color: #ccc;
        }
    }
    .tabletitle {
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248, 248, 249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
    .mintitle {
        font-size: 14px;
        font-weight: bold;
        margin-left: 20px;
        border-bottom: 2px solid #000;
        margin-bottom: 6px;
    }
}
</style>